<template>
  <el-dialog
    :title="$t('common.allot') + name"
    :visible.sync="dialogVisible"
    width="90%"
    :show="show"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    @open="open"
    @close="$emit('update:show', false)"
  >
    <div class="filter-container">
      <el-input
        size="small"
        :placeholder="$t('common.enter', [$t('common.username')])"
        v-model="listQuery.name"
        style="width: 150px"
        class="filter-item"
      />
      <el-button
        size="small"
        class="filter-item"
        icon="el-icon-search"
        type="primary"
        plain
        @click="search"
      >
        {{ $t('common.search') }}
      </el-button>
      <el-button
        size="small"
        class="filter-item"
        type="primary"
        icon="el-icon-plus"
        @click="add"
      >
        {{ $t('common.create') }}
      </el-button>
      <el-button
        size="small"
        class="filter-item right"
        icon="el-icon-refresh"
        type="primary"
        plain
        @click="refresh"
      >
        {{ $t('common.refresh') }}
      </el-button>
    </div>
    <el-table
      :data="list"
      element-loading-text="Loading"
      v-loading="allotLoading"
      fit
      border
      size="medium"
      style="margin-bottom: 20px"
      height="500px"
      :header-cell-style="{ background: '#F2F6FC' }"
    >
      <el-table-column
        align="center"
        fixed="left"
        :label="$t('common.id')"
        width="50"
        type="index"
      >
      </el-table-column>
      <el-table-column
        :label="$t('system.allotedUsername')"
        fixed="left"
        min-width="110px"
      >
        <template slot-scope="scope">
          <strong>{{ scope.row.allotUsername }}</strong>
        </template>
      </el-table-column>
      <el-table-column :label="$t('common.operateUser')" min-width="110px">
        <template slot-scope="scope">
          {{ scope.row.operateTruename }}
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('common.operateTime')"
        width="155px"
        align="center"
      >
        <template slot-scope="scope">
          {{ scope.row.updatedAt }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        :label="$t('common.actions')"
        width="150px"
      >
        <template slot-scope="scope">
          <el-button
            type="danger"
            size="mini"
            icon="el-icon-delete"
            @click="deleteRow(scope.row.id)"
            >{{ $t('common.delete') }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      style="margin-bottom: 15px"
      v-show="listQuery.total > 0"
      :total="listQuery.total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="open"
    />
  </el-dialog>
</template>
<script>
import Pagination from '@/components/Pagination'
import { getAction, postAction } from '@/api/common'

export default {
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    name: {
      type: String,
      default: '',
    },
    oemId: {
      type: [Number, String],
      default: '',
    },
  },
  data() {
    return {
      list: null,
      dialogVisible: this.show,
      allotLoading: true,
      listQuery: {
        page: 1,
        total: 0,
        limit: 20,
        oemId: '',
        name: '',
      },
    }
  },
  components: {
    Pagination,
  },
  methods: {
    async open() {
      this.allotLoading = true
      this.listQuery.oemId = this.oemId
      const { data } = await getAction(this.listQuery, 'oem/GetAllotList')
      this.list = data.items
      this.listQuery.total = data.total
      this.allotLoading = false
    },
    add() {
      // eslint-disable-next-line eqeqeq
      if (this.listQuery.name == '') {
        this.$message.error(
          this.$t('common.enter', [this.$t('common.username')])
        )
        return false
      }
      this.$confirm(this.$t('system.confirmRelated'), this.$t('common.tips'), {
        confirmButtonText: this.$t('common.confirm'),
        cancelButtonText: this.$t('common.cancel'),
        type: 'warning',
      })
        .then(async () => {
          this.listLoading = true
          await postAction(
            {
              oemId: this.oemId,
              name: this.listQuery.name,
            },
            'oem/addAllot'
          )
          this.$notify({
            title: this.$t('common.success'),
            message: this.$t('common.operationSuccess'),
            type: 'success',
            duration: 2000,
          })

          this.open()
          this.listLoading = false
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: this.$t('common.cancelOperation'),
          })
        })
    },
    deleteRow(id) {
      this.$confirm(
        this.$t('system.confirmRemoveRelated'),
        this.$t('common.tips'),
        {
          confirmButtonText: this.$t('common.confirm'),
          cancelButtonText: this.$t('common.cancel'),
          type: 'warning',
        }
      )
        .then(async () => {
          this.listLoading = true
          await postAction({ id: id }, 'oem/DelAllot')

          this.listLoading = false
          this.open()
          this.$notify({
            title: this.$t('common.success'),
            message: this.$t('common.operationSuccess'),
            type: 'success',
            duration: 2000,
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: this.$t('common.cancelOperation'),
          })
        })
    },
    search() {
      this.listQuery.page = 1
      this.open()
    },
    refresh() {
      this.open()
    },
  },
  watch: {
    show() {
      this.dialogVisible = this.show
    },
  },
}
</script>
